<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  .box {
    position: absolute;
    width: 500px;
    height: 400px;
    background-color: rgba(0, 0, 0, .2);
  }

  .box .tu img {
    width: 500px;
    height: 300px;
  }

  .zi {
    width: 500px;
    height: 50px;
    line-height: 10px;
    text-indent: 2em;
  }

  ul {
    height: 20px;
    width: 500px;
  }

  li {
    float: left;
    width: 30px;
    height: 20px;
    color: white;
  }

  .active {
    color: black;
  }

  .zuo {
    position: relative;
    right: 0px;
    bottom: 250px;
    width: 30px;
    height: 30px;
  }

  .you {
    position: relative;
    left: 437px;
    bottom: 250px;
    width: 30px;
    height: 30px;
  }
</style>

<body>
  <div class="box">
    <div class="tu">
      <img src="图片/1.jpg" alt="">
    </div>
    <div class="zi">
      <p>阿里卡圣诞节啊可视角度</p>
      <ul class="dian">
        <li class="active"></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
      <button class="zuo">
        &lt;</button>
      <button class="you">></button>
    </div>
  </div>
  <script>
    const wenzi = [
      { url: '图片/1.jpg', title: '阿里卡圣诞节啊可视角度' },
      { url: '图片/2.jpg', title: '十多个水电费感受到官方十大高' },
      { url: '图片/3.jpg', title: '水电费是否水电费水电费' },
      { url: '图片/4.jpg', title: '水电费水电费是东方红' },
      { url: '图片/5.jpg', title: '加工费金刚护法科技大学发哈' },
      { url: '图片/6.jpg', title: '国际化刚看到讲课费土地干哈' },
      { url: '图片/7.jpg', title: '相持不下不能发广告就没戏' },
      { url: '图片/8.jpg', title: '山东高速感觉剃头发' },
      { url: '图片/9.jpg', title: '公司大富豪叫哦干撒' }
    ]
    const img = document.querySelector('.tu img')
    const p = document.querySelector('.zi p')
    const zuo = document.querySelector('.zuo')
    const box = document.querySelector('.box')
    let i = 0
    const you = document.querySelector('.you')
    you.addEventListener('click', function () {
      i++
      i = i >= 9 ? 0 : i
      p.innerHTML = wenzi[i].title
      img.src = wenzi[i].url
      document.querySelector('.dian .active').classList.remove('active')
      document.querySelector(`.dian li:nth-child(${i + 1})`).classList.add('active')
    })
    zuo.addEventListener('click', function () {
      i--
      i = i <= 0 ? wenzi.length - 1 : i
      p.innerHTML = wenzi[i].title
      img.src = wenzi[i].url
      document.querySelector('.dian .active').classList.remove('active')
      document.querySelector(`.dian li:nth-child(${i + 1})`).classList.add('active')
    })
    let n = setInterval(function () {
      you.click()
    }, 1000)
    box.addEventListener('mouseenter', function () {
      clearInterval(n)
    })
    box.addEventListener('mouseleave', function () {
      clearInterval(n)
      n = setInterval(function () {
        you.click()
      }, 1000)
    })
  </script>
</body>

</html>